<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="../../assets/js/base/vue.js" type="text/javascript" charset="utf-8"></script>
		<title>父子组件之间传递数据</title>
	</head>
	<body>
		<div id="app">
			<!-- 父组件可以在引用子组件的时候，通过属性绑定的形式，
				把需要传递给子组件的数据，以属性绑定的形式（v-bind），传递给子组件内部，供子组件使用 -->
			<com1 v-bind:msg="msg"></com1>
			<!-- 将父组件的方法传递给子组件:使用事件绑定机制（v-on），当我们自定义了一个事件属性之后，那么
			 子组件就可以通过某些方式，来调用传递进来的这个父组件方法-->
			<com2 v-on:func="show"></com2>
		</div>

		<template id="temp">
			<div>
				<h1>这是子组件内容</h1>
				<button type="button" @click="click">子组件按钮</button>
			</div>
		</template>
		
		<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					msg:'123'
				},
				methods:{
					show(data){
						console.log("父组件的show方法！"+data.name+":"+data.age);
					}
				},
				components:{
					// 子组件默认无法访问父组件data和methods中的数据和方法
					com1:{
						template:"<h1>{{msg}},hhh</h1>",
						// 组件中的所有props中的数据，都是通过父组件传递给子组件的
						// 子组件中data的数据，属于子组件私有，比如通过请求获取到的数据
						// 把父组件传递过来的绑定数据的属性，现在props数组中定义一下，才能使用找狗哥数据
						// 数据只读，无法重新复制
						props:["msg"]
					},
					com2:{
						template:"#temp",
						methods:{
							click(){
								console.log("子组件方法：click");
								// emit:触发，调用
								var somMsg = {'name':'王大头','age':2}
								this.$emit('func',somMsg)
							}
						}
					}
				}
			});
		</script>
	</body>
</html>
